<template>
    <div class="order-apply-invoice">
      <div id="barMain" style="width: 100%; height: 400px;"></div>
    </div>
</template>
<script lang="ts" setup>
import { ref,onMounted, watch,nextTick} from 'vue'
import * as echarts from 'echarts'
const props = defineProps({
  lineChartInfo: {
    type: Array,
    default: () => {},
  },
  config: {
    type: Object,
    default: () => {},
  },
})
const linChart = ()=> {
    let option = {
        legend: {
            right: '50px',
            top: '30px',
            data: ['美元', '人民币']
        },
        grid: {
            left: '3%',  // 默认 3% 可能不够
            right: '4%', // 默认 4% 可能不够
            bottom: '3%',
            containLabel: true // 确保坐标轴标签不被截断
        },
        xAxis: {
            type: 'category',
            data: Array.from(props.config.xAxisData)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '美元',
                type: 'bar',
                data: Array.from(props.config.yAxisDataUSD)
            },
            {
                name: '人民币',
                type: 'bar',
                data: Array.from(props.config.yAxisDataCNY)
            }
        ]
    }
    nextTick(() => { 
        echarts.init(document.getElementById('barMain')).setOption(option);
    })
}

watch(() => props.config,(newVal, oldVal) =>{
  console.log("11111",props.config)
  console.log("22222",props.lineChartInfo)
  linChart()
},{deep:true})
onMounted(() => { 
  // linChart()
})  
</script>